<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="false">
			<block slot="backText"></block>
			<block slot="content">积分换购</block>
		</cu-custom>
		<view class="top-shows">
			<view class="">
				<text @click="userInfo && userInfo.jifen?nullFun():goLoginNew()">{{userInfo.jifen?userInfo.jifen:'****'}}</text>
				<text>当前积分</text>
			</view>
		</view>
		<view class="title-header" v-if="chainList.length>0">
			<view class="action">
				<text class="text-xl text-bold text-black">兑换排行榜</text>
			</view>
		</view>
		<view class="banner-content" v-if="chainList.length>0">
			<scroll-view scroll-x scroll-with-animation="true">
				<view class="swiper-container">
					<view class='swiper-item' v-for="(item,index) in chainList" :key="index">
						<view class="coon" @click="nav(item.business_id,item.id,item.industry_id)" :style="item.style">
							<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_190,w_190'" lazy-load />
							<view class="name text-cut">
								{{item.product_name}}
							</view>
							<view class="slogin">
								<text class="text-colorP text-price" v-if="item.price!=0">{{item.price}}</text>
								<text class="text-colorP" v-if="item.integral!=0 && item.price!=0">+</text>
								<text class="text-colorP" v-if="item.integral!=0">{{item.integral}}</text>
								<text class="text-colorP" v-if="item.integral!=0">积分</text>
							</view>
							<view class="text-price number">
								{{item.ot_price}}
							</view>
							<image class="posi-left" v-if="index<=2" :src="`https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner-mark${index+1}.png`"
							 mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="title-header">
			<view class="action">
				<text class="text-xl text-bold text-black">为您推荐</text>
			</view>
		</view>
		<view class="remoned">
			<view class="remoned-item" v-for="(item,index) in recomendList" :key="index" @click="nav(item.business_id,item.id,item.industry_id)">
				<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_240,w_323'" mode=""></image>
				<view class="bott-m">
					<view class="product_name">
						{{item.product_name}}
					</view>
					<view class="">
						<view class="scord">
							<view class="">
								<text class="text-colorP text-price" v-if="item.price!=0">{{item.price}}</text>
								<text class="text-colorP" v-if="item.integral!=0 && item.price!=0">+</text>
								<text class="text-colorP" v-if="item.integral!=0">{{item.integral}}</text>
								<text class="text-colorP" v-if="item.integral!=0">积分</text>
							</view>
							<view class="text-gray text-price">
								{{item.ot_price}}
							</view>
						</view>
						<view class="num">
							<text v-if="item.sales==0">已兑换{{item.sales}}件</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-modal :show="modalShow" @click="handleClick" @cancel="hide" content="您还未登录,请先登录" :button="button"></tui-modal>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqMap.js');
	import tuiModal from "@/components/thorUI/modal.vue"
	export default {
		components: {
			tuiModal
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				chainList: [],
				recomendList: [],
				page: 1,
				lastPage: '',
				noContentShow: false,
				noMore: false,
				userInfo: {},
				modalShow: false,
				button: [{
					text: "暂不登录",
					type: 'gray'
				}, {
					text: "立即登录",
					type: 'red'
				}],
				curUrl: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})

			let curUrl = `/${this.thisCurUrlWithArgs()}`
			this.curUrl = encodeURIComponent(curUrl)
		},
		onShow() {},
		onShow() {
			var that = this
			// 重新定位后重新获取数据
			if (uni.getStorageSync('isChangeCoordinate')) {
				that.getChainShopsNew()
				that.getRecomend()
				uni.removeStorageSync('isChangeCoordinate')
			}
			// 获取用户
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
			}
		},
		onLoad() {
			var that = this
			if (uni.getStorageSync('coordinate')) {
				that.getChainShopsNew()
				that.getRecomend()
			} else {
				uni.getLocation({
					type: 'wgs84',
					success: map => {
						var coordinate = {
							"latitude": map.latitude,
							"longitude": map.longitude
						}
						uni.setStorageSync('coordinate', coordinate);
						that.setCityNameNew()
						that.getChainShopsNew()
						that.getRecomend()
					},
					fail: (e) => {
						uni.showModal({
							title: '温馨提示',
							content: '系统定位失败，请前往手动选择当前城市',
							confirmText: '立即前往',
							showCancel: false, // 不显示取消按钮
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/selectCity?currentCity=' + (that.cityName ? that.cityName : '西安市')
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
				});
			}
		},
		onReachBottom() {
			if (this.page > this.lastPage) {
				uni.showToast({
					title: '没有更多咯~',
					icon: 'none'
				})
				return
			}
			this.getRecomend()
		},
		onPullDownRefresh() {
			var that = this
			that.getChainShopsNew()
			that.noContentShow = false
			that.noMore = false
			that.lastPage = ''
			that.page = 1
			that.recomendList = []
			that.getRecomend()
			setTimeout(function() {
				uni.showToast({
					title: '刷新成功'
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取页面栈的路径
			thisCurUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			nullFun() {},
			nav(bId, gId, iId) {
				if (iId != 6) {
					uni.navigateTo({
						url: `/pages/generalDetail?busId=${bId}&thisGoods=${gId}`
					})
				} else {
					// &thisGoods=${gId}
					uni.navigateTo({
						url: `/pages/scenicDetail?busId=${bId}`
					})
				}
			},
			// 地址逆查询  
			setCityNameNew() {
				var that = this
				// 实例化腾讯地图API核心类
				var qqmapsdk = new QQMapWX({
					key: '66DBZ-Q4NL4-46HUZ-X6SQW-RRTGS-HQF7I' // 必填
				});
				//1、获取当前位置坐标
				//2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
				var coordinate = uni.getStorageSync('coordinate')
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: function(addressRes) {
						var address = addressRes.result.address_component.city;
						coordinate['cityName'] = address
						uni.setStorageSync('coordinate', coordinate)
						that.cityName = address
					}
				})
			},
			handleClick(e) {
				let index = e.index;
				var userInfo = uni.getStorageSync('userInfo')
				if (index === 0) {} else {
					uni.navigateTo({
						url: `/pages/login?next=${this.curUrl}`,
					})
				}
				this.hide()

			},
			hide() {
				this.modalShow = false
			},
			// 登录登录
			goLoginNew() {
				this.modalShow = true
			},
			// 获取连锁商家
			getChainShopsNew() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Product/get_jifen_level',
					methods: 'GET',
					data: {
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							var result = res.data.data
							me.chainList = result
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getRecomend() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Product/get_jifen_product_order',
					methods: 'GET',
					data: {
						latitude: coordinate.latitude,
						longitude: coordinate.longitude,
						page: me.page
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.totalNum == 0) {
								me.noContentShow = true
								return
							}
							var result = res.data.data.product_data
							me.recomendList = me.recomendList.concat(result)
							me.page++
							me.lastPage = res.data.data.pageCount
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},

		}
	}
</script>

<style scoped>
	.top-shows {
		width: 100%;
		height: 320rpx;
		position: relative;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/integral-for-bg.png?x-oss-process=image/resize,m_fill,h_320,w_750') no-repeat;
		background-size: 100% 100%;
	}

	.top-shows view {
		width: 640rpx;
		height: 180rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -320rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
		box-sizing: border-box;
		flex-direction: column;
	}

	.top-shows view text:nth-child(1) {
		font-size: 64rpx;
		letter-spacing: 3rpx;
		color: rgba(248, 153, 11, 1);
		font-weight: bold
	}

	.top-shows view text:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: rgba(51, 51, 51, 1);
	}

	/* 首页公用标题样式 */
	.title-header {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		/* background: #fff; */
	}

	.new-more {
		padding: 0 12rpx;
		height: 42rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #999999;
		text-align: center;
	}

	/* 连锁商家 */

	.banner-content {
		background: #fff;
		/* padding: 20rpx 0; */
		box-sizing: border-box;
		position: relative;
	}

	.swiper-container {
		width: 100%;
		/* display: flex; */
		padding-right: 24rpx;
		white-space: nowrap;
		/* background: #f8f8f8; */
	}

	.swiper-container .swiper-item {
		display: inline-block;
		width: 210rpx;
		height: 327rpx;
		position: relative;
		/* margin: 20rpx 20rpx 20rpx 0; */
		margin-right: 20rpx;
		box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(102, 102, 102, 0.3);
		border-radius: 8rpx;
	}

	.swiper-container .swiper-item .coon .zhanwei {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none !important;
		border-radius: 8rpx;
		box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(102, 102, 102, 0.3);
	}

	.swiper-container .swiper-item .coon {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		padding: 10rpx;
		box-sizing: border-box;
	}

	.posi-left {
		position: absolute;
		left: 0;
		top: 0;
		width: 48rpx !important;
		height: 48rpx !important;
	}

	.swiper-container .swiper-item:nth-child(1) {
		margin-left: 24rpx;
	}

	.swiper-container .swiper-item .coon image {
		width: 190rpx;
		height: 190rpx;
		border-radius: 8rpx;
	}

	.swiper-container .swiper-item .coon .name {
		font-size: 26rpx;
		letter-spacing: 1rpx;
		color: #333333;
		line-height: 46rpx;
		max-width: 190rpx;
	}

	.swiper-container .swiper-item .coon .slogin {
		width: 100%;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #fff;
		box-sizing: border-box;
		margin-top: 15rpx;
		max-width: 190rpx;
	}

	.swiper-container .swiper-item .coon .number {
		letter-spacing: 1rpx;
		color: #999999;
		text-decoration: line-through;
		font-size: 22rpx;
	}

	.remoned {
		width: 100%;
		padding: 0 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.remoned-item {
		width: 49%;
		height: 408rpx;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border: solid 1rpx #efefef;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.remoned-item image {
		width: 323rpx;
		height: 240rpx;
		border-radius: 8rpx;
	}

	.bott-m {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.remoned-item .bott-m .product_name {
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: pre-wrap;
		line-height: 34rpx;
	}

	.remoned-item .bott-m .scord {
		display: flex;
		align-items: center;
		align-items: center;
		margin-top: 10rpx;
	}

	.remoned-item .bott-m .scord text {
		font-size: 24rpx;
	}

	.remoned-item .bott-m .scord>view:nth-child(2) {
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.remoned-item .bott-m .num {
		color: #333333;
		font-size: 20rpx;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>
